<template lang="html">
  <div class="container">
    <content>
      <div class="login-card">
        <div class="login-header">
          <div class="login-icon">
            <i class="material-icons">face</i>
          </div>
          <div class="login-slogan">
            Need a slogan
          </div>
        </div>
        <div class="login-content">
          <div
           class="login-user"
           :class="{ userwarning : USER_TIPS_MESSAGE_VISIBLE }">
              <input
               spellcheck="false"
               type="text"
               v-model="userValue"
               :placeholder="userTipsMessage"
               @blur="userBlurTips"
               @focus="userFocusTips"
               >
          </div>
          <div class="login-password" :class="{ passwordwarning : PASSWORD_TIPS_MESSAGE_VISIBLE }">
            <input
             spellcheck="false"
             :type='passwdVisible'
             :placeholder='passwordTipsMessage'
             @blur='passwordBlurTips'
             @focus='passwordFocusTips'
             :value="passwordValue"
             v-on:input = "passwordValue = $event.target.value"
             >
            <span>
              <i class="material-icons" @click="passwordVisible()"> {{ icon }} </i>
            </span>
          </div>
          <div class="login-option">
            <span><a href="#">手机验证码登录</a></span>
            <span><a href="#">忘记密码？</a></span>
          </div>
          <div class="login-submit">
            <span>登录</span>
          </div>
          <div class="login-footer">
            <a href="#">二维码登录</a>
            <span>.</span>
            <a href="#">社交帐号登录</a>
          </div>
        </div>

        <div class="login-register">
          <span>没有帐号？<nuxt-link to="/register">注册</nuxt-link></span>
        </div>

        <div class="downloadButton">
          <span>下载西城 APP</span>
        </div>
      </div>
    </content>
    <footer></footer>
  </div>
</template>

<script>
export default {

  data () {
    return {
      userValue: '',
      passwordValue: '',
      icon: 'visibility_off',
      passwdVisible: 'password',
      passwordTipsMessage: '密码',
      userTipsMessage: '帐号或邮箱',
      USER_TIPS_MESSAGE_VISIBLE: false,
      PASSWORD_TIPS_MESSAGE_VISIBLE: false
    }
  },
  methods: {
    passwordVisible: function () {
      if (this.icon === 'visibility_off') {
        this.icon = 'visibility'
        this.passwdVisible = 'text'
        console.log(this.passwordValue)
      } else {
        this.icon = 'visibility_off'
        this.passwdVisible = 'password'
        console.log(this.passwordValue)
      }
    },
    userBlurTips: function () {
      if (this.userValue === '') {
        this.USER_TIPS_MESSAGE_VISIBLE = true
        this.userTipsMessage = ''
      } else if (this.userValue !== '') {
        this.USER_TIPS_MESSAGE_VISIBLE = false
      }
    },
    userFocusTips: function () {
      this.USER_TIPS_MESSAGE_VISIBLE = false
      if (this.userValue === '') {
        this.userTipsMessage = '帐号或邮箱'
      }
    },
    passwordBlurTips: function () {
      if (this.passwordValue === '') {
        this.PASSWORD_TIPS_MESSAGE_VISIBLE = true
        this.passwordTipsMessage = ''
      } else if (this.passwordValue !== '') {
        this.PASSWORD_TIPS_MESSAGE_VISIBLE = false
      }
    },
    passwordFocusTips: function () {
      this.PASSWORD_TIPS_MESSAGE_VISIBLE = false
      if (this.userValue === '') {
        this.passwordTipsMessage = '密码'
      }
    }
  }
}
</script>

<style lang="scss" scoped>

  * {
    box-sizing: border-box;
  }

  @keyframes fade {
  /* transform: translateX(-1%);
  transform: translateX(0%); */
    0% { opacity: .5; }
    100% { opacity: 1; }
  }

  .container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(https://static.zhihu.com/heifetz/bg.8ca8122d44fc9a0f7b04.png);

    content {
      display: flex;
      justify-content: center;

      width: 100%;
      height: 100%;
      padding: 50px 0;
      padding-top: 150px;

      .login-card {
        width: 432px;
        height: 508px;
        background-color: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,.1);

        .login-header {
          width: 432px;
          height: 148px;
          padding: 30px 0 5px 0;
          .login-icon {
            width: 140px;
            height: 64px;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;

            i {
                  color: #000;
                  font-size: 50px;
            }
          }

          .login-slogan {
            width: 432px;
            height: 33px;
            color: #4a90e2;
            font-size: 24px;
            margin-top: 15px;
            text-align: center;
          }
        }

        .login-content {
          width: 432px;
          height: 303px;
          padding: 0 40px 36px 40px;

          .login-user {
            position: relative;
            width: 352px;
            height: 48px;
            border: 1px;
            border-bottom: 1px solid #e7eaf1;
            z-index: 0;
            &.userwarning:before {
                content: '请输入帐号或邮箱';
                position: absolute;
                color: #f75659;
                height: 47px;
                cursor: text;
                font-size: 14px;
                line-height: 35px;
                padding-top: 12px;
                animation: fade .6s;
                z-index: -1;
          }

            input {
              width: 352px;
              height: 47px;
              border: none;
              font-size: 14px;
              padding-top: 12px;
              outline-color: transparent;
              background-color: transparent;
            }
          }

          .login-password {
            z-index: 0;
            position: relative;
            width: 352px;
            height: 48px;
            margin-top: 5px;
            border-bottom: 1px solid #e7eaf1;
            display: flex;
            align-items: center;

            &.passwordwarning:before {
                z-index: -1;
                content: '请输入密码';
                color: #f75659;
                height: 47px;
                line-height: 35px;
                padding-top: 12px;
                font-size: 14px;
                position: absolute;
                animation: fade .6s;
                cursor: text;
          }

            span {
              margin-top: 12px;
              cursor: pointer;
              user-select: none;
              i {
                color: #9fadc7;
                font-size: 20px;

              }
            }

            input {
              width: 352px;
              height: 47px;
              border: none;
              outline-color: transparent;
              padding-top: 12px;
              font-size: 14px;
              background-color: transparent;
            }

          }

          .login-option {
            width: 352px;
            height: 20px;
            margin-top: 12px;
            display: flex;
            justify-content: space-between;

            a {
              cursor: pointer;
            }

            span:nth-child(1) {
              a {
                color: #175199;
                font-size: 14px;
                font-weight: 400;
                text-decoration: none;
                box-shadow: 0 1px 0 0 #175199;
              }
            }

            span:nth-child(2) {
              a {
                color: #8590a6;
                font-size: 14px;
                font-weight: 400;
                text-decoration: none;
              }
            }

          }

          .login-submit {
            width: 352px;
            height: 36px;
            padding: 0 16px;
            margin-top: 36px;
            background-color: #0f88eb;
            border-radius: 3px;
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;

            &:hover {
              background-color: #0d79d1;
            }
          }
        }

        .login-footer {

          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 25px;
          color: #262626;
          font-size: 14px;

          span {
            display: block;
            text-align: center;
            width: 25px;
            height: 25px;

          }

          a {
            color: #8590a6;
            text-decoration:none;

            &:hover {
              color: #7a8599;
            }
          }
        }

        .login-register {
          width: 432px;
          height: 58px;
          background-color: #f7f8fa;
          color: #262626;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 16px;
          border-top: 1px solid #e7eaf1;

          a{
            color: #175199;
            text-decoration: none;
          }
        }
      }

      .downloadButton {
        width: 432px;
        height: 42px;
        padding: 0 16px;
        margin-top: 30px;
        cursor: pointer;
        border-radius: 3px;
        background-color: #8f9bb3;
        display: flex;
        justify-content: center;
        align-items: center;
        span {

          color: #fff;
          font-size: 14px;
        }
      }
    }
  }
</style>
